<template>
  <view class="pagination-wrap" v-cloak v-if="totalPage!=0">
      <view>
        <ul class="pagination">
            <!-- <li :class="currentPage==1?'disabled':''"  @click="turnToPage(1)">首页</li> -->
            <li :class="currentPage==1?'disabled':''" class="class_cur"  @click="turnToPage(currentPage-1)">
                <text class="iconfont icon-zuojiantou"></text>
            </li>
            <li @click="turnToPage(currentPage-3)" v-if="currentPage-3>0"> {{ currentPage-3 }}</li>
            <li @click="turnToPage(currentPage-2)" v-if="currentPage-2>0"> {{ currentPage-2 }}</li>
            <li @click="turnToPage(currentPage-1)" v-if="currentPage-1>0"> {{ currentPage-1 }}</li>
            <li class="active" @click="turnToPage(currentPage)">{{ currentPage ? currentPage : '3' }}</li>
            <li @click="turnToPage(currentPage+1)" v-if="currentPage+1<totalPage">{{ currentPage+1 }}</li>
            <li @click="turnToPage(currentPage+2)" v-if="currentPage+2<totalPage">{{ currentPage+2 }}</li>
            <li @click="turnToPage(currentPage+3)" v-if="currentPage+3<totalPage">{{ currentPage+3 }}</li>
            <li :class="currentPage==totalPage?'disabled':''" class="class_cur" @click="turnToPage(currentPage+1)">
                <text class="iconfont icon-youjiantou"></text>
            </li>
            <!-- <li :class="currentPage==totalPage?'disabled':''" @click="turnToPage(totalPage)">尾页</li> -->
        </ul>
      </view>

      <view class="center_text">
        <!--  当前第 
        <span class="text-primary" v-text="currentPage"></span> 
        页， -->
        共
        <span class="text-primary" v-text="totalPage"></span> 
        页
      </view>

      <view class="go">
        <view :class="isPageNumberError?'input-group error':'input-group'">
          <input class="form-control" type="number" v-model.number="goToPage"><a href="javascript:;" class="input-group-addon" @click="turnToPage(goToPage, true)">Go</a>
        </view>
      </view>
  </view>
</template>

<script>
export default {
	props: {
        //传入总页数，默认100
		totalPage: {
			type: Number,
            default: 1,
            required: true,
		    validator(value) {
		        return value >= 0
		    }
		}, 

        //传入当前页，默认1
		pageIndex:{
			type: Number,
            default: 1,
		    validator(value) {
		        return value >= 0
		    }
		},

        //传入页面改变时的回调，用于更新你的数据
        //回调默认是打印当前页
        //请根据需要在传入的回调函数里更改函数体
		changeCallback: {
	    	type: Function,
	    	default(cPage) {
				// console.log("默认回调，显示页码：" + cPage);
	        }
	     }
	},
	data(){
		return {
			myCurrentPage : this.pageIndex,
            isPageNumberError: false,
            goToPage: '',
            isInternalUpdate: false // 标记是否为内部更新，避免触发不必要的回调
		}
	},
    watch: {
        pageIndex(newVal, oldVal) {
            this.myCurrentPage = newVal;
        },
        totalPage(newVal, oldVal) {
            // 当总页数发生变化时，检查当前页是否超出范围
            if (newVal <= 0) {
                // 如果没有数据，重置为第1页
                this.resetPagination();
            } else if (this.myCurrentPage > newVal) {
                // 如果当前页超出新的总页数，自动跳转到最后一页
                this.myCurrentPage = newVal;
            }
        }
    },
	computed:{
		// prop不应该在组件内部做改变
		// 所以我们这里设置一个内部计算属性myCurrentPage来代替props中的currentPage
		// 为什么要这么做？参考：https://cn.vuejs.org/v2/guide/components.html#单向数据流
		currentPage(){ 
			return this.myCurrentPage;
		}
	},
	methods:{
		// 重置分页组件状态
		resetPagination() {
			this.myCurrentPage = 1;
			this.isPageNumberError = false;
			this.goToPage = '';
		},
		//turnToPage为跳转到某页
		//传入参数pageNum为要跳转的页数
		turnToPage( num , type = false){
			let pageNum = parseInt(num);
			//页数不合法则退出
			if (!pageNum || pageNum > this.totalPage || pageNum < 1) {
                if (type) {
                    uni.showToast({
                        title: '页码输入有误！',
                        icon: 'none',
                        duration: 2000
                    })
                }
               
				return false;		
			}else{
                this.isPageNumberError = false;
                this.goToPage = ''
            }
			//更新当前页
			this.myCurrentPage = pageNum;

			//页数变化时的回调
			this.changeCallback(pageNum); 
		}
	}
}
</script>

<style scoped lang="less">
.pagination-wrap{
    display: flex;
    align-items: center;
    text-align: center;
}
.pagination {
    display: flex;
    padding-left: 0;
    border-radius: 8rpx;

    li {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 60rpx;
        height: 60rpx;
        color: #000;
        background: #fff;
        padding: 10rpx 15rpx;
        border: 1rpx solid #ddd;
    }
    .class_cur {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60rpx;
    }

    .disabled {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }

    .active {
        color: #fff;
        background: #428bca;
    }
    
}

.center_text {
  white-space: nowrap;
  margin: 0 20rpx;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group-addon {
    padding: 12rpx 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1rpx solid #ccc;
    border-radius: 0 8rpx 8rpx 0;
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
	box-sizing: border-box;
    display: table-cell;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.go .error .form-control{
    border: 1rpx solid #d95656;
}
.form-control {
    display: block;
    width: 100%;
    height: 68rpx;
    padding: 12rpx 24rpx;
    font-size: 28rpx;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1rpx solid #ccc;
    border-radius: 8rpx;
    -webkit-box-shadow: inset 0 1rpx 1rpx rgba(0,0,0,.075);
    box-shadow: inset 0 1rpx 1rpx rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.text-primary {
    color: #428bca;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 8rpx;
    border-bottom-left-radius: 8rpx;
}
.go {
    display: inline-block;
    max-width: 280rpx;
    position: relative;
}
.input-group-addon:last-child {
	display: table-cell;
	text-decoration: none;
    border-left: 0;
}
/*** 
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #428bca;
    border-color: #428bca;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 12rpx 24rpx;
    margin-left: -1rpx;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1rpx solid #ddd;
}
.pagination>li {
    display: inline;
}
*/
</style>